/**
 *  @互联家
 *  @互联家 房间维护页面
 */
import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Text } from 'react-native';

import { List, DatePicker } from 'antd-mobile-rn';

/**
 *  @style 主要样式导入
 */
import roomProtectStyle from "../styles/roomProtect";

export default class RoomProtectScreen extends Component {

  static navigationOptions = {
    headerTitle: '房间维护',
    headerRight: <View />,
  };

  constructor(props) {
    super(props);
    this.state = {
      date: '2018-07',
      value: undefined,
    };
  };

  onChange = (value) => {
    this.setState({ value });
  }

  render() {
    return (
      <ScrollView style={{ flex: 1, backgroundColor: '#ffffff' }}>

        <List>
          <DatePicker
            value={this.state.value}
            mode="date"
            minDate={new Date(2018, 0, 1)}
            maxDate={new Date(2030, 11, 30)}
            onChange={this.onChange}
            format="YYYY-MM-DD"
          >
            <List.Item arrow="horizontal">选择日期</List.Item>
          </DatePicker>
        </List>

        <View style={styles.container}>
          <View style={styles.col}>
            <View style={styles.header}>
              <Text numberOfLines={1} style={styles.headerText}>房型</Text>
            </View>
            <View styles={styles.nameBox}>
              <Text numberOfLines={1} style={styles.name}>豪华大床房</Text>
            </View>
            <View styles={styles.nameBox}>
              <Text numberOfLines={1} style={styles.name}>豪华大床房</Text>
            </View>
            <View styles={styles.nameBox}>
              <Text numberOfLines={1} style={styles.name}>豪华大床房</Text>
            </View>
            <View styles={styles.nameBox}>
              <Text numberOfLines={1} style={styles.name}>豪华大床房</Text>
            </View>
            <View styles={styles.nameBox}>
              <Text numberOfLines={1} style={styles.name}>豪华大床房</Text>
            </View>
          </View>

          <View style={styles.cols}>
            <View style={styles.headers}>
              <Text numberOfLines={1} style={styles.headersText}>07-23</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>5</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>6</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>7</Text>
            </View>
          </View>

          <View style={styles.cols}>
            <View style={styles.headers}>
              <Text numberOfLines={1} style={styles.headersText}>07-24</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>5</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>6</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>7</Text>
            </View>
          </View>

          <View style={styles.cols}>
            <View style={styles.headers}>
              <Text numberOfLines={1} style={styles.headersText}>07-25</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>5</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>6</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>7</Text>
            </View>
          </View>

          <View style={styles.cols}>
            <View style={styles.headers}>
              <Text numberOfLines={1} style={styles.headersText}>07-26</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>4</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>5</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>6</Text>
            </View>
            <View styles={styles.namesBox}>
              <Text numberOfLines={1} style={styles.names}>7</Text>
            </View>
          </View>

        </View>

      </ScrollView>
    );
  };
};

const styles = StyleSheet.create(roomProtectStyle);